import React, { useState,useEffect } from "react";
import { NavLink,Outlet } from "react-router-dom";

const UseState2= () => {
    const [count, setCount] = useState(0);
    useEffect(()=>{
        return()=>{
            console.log("在组件渲染和卸载的时候执行----------------")
        }
    },[])
    return (
        <div>我是子组件</div>
    )
}
const UseState = () => {
  const [count, setCount] = useState(0);
  const [show, setShow] = useState(true);
  useEffect(()=>{
      console.log("count changed to, 每一次状态更新都会执行1",count)
      return()=>{
          console.log("这里是componentWillUnmount 2",count)
      }
  })
    useEffect(()=>{
        console.log("componentDidMount and compoentDidUpdate3",count)
        return()=>{
            console.log("componentWillUnmount 4",count)
        }
    },[])
  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };
    const deleteChild = () => {
        setShow(!show)
    };
    const consoles = ()=>{
        console.log("count changed to, 每一次状态更新都会执行3",count)
    }
  return (

      <div>
          <h1>Count: {count}</h1>
          {consoles()}
          {show && <UseState2/>}
          <button onClick={handleIncrement}>Increment</button>
          <button onClick={handleDecrement}>Decrement</button>
          <button onClick={deleteChild}>Delete || Add Child</button>
          <hr/>
          <button>
              <NavLink to="child1">Go to Child1</NavLink>
          </button>
          <button>
              <NavLink to="child2">Go to child2</NavLink>
          </button>
          <button>
              <NavLink to="child9">Go to child9</NavLink>
          </button>
          <h1><Outlet/></h1>

      </div>
  );
};

export default UseState;